<!-- 我的名片 -->
<template>
	<view class="business_docking">
		<view class="business_docking_serach u-m-b-10">
			<!-- 			<view class="serach_name u-m-r-20">
				<view class="u-m-r-10">客户名称</view>
				<u-icon name="e665" size="15" custom-prefix="iconfont" />
			</view> -->
			<view class="business_serach">
				<u-icon name="e61e" size="40" color="#9F9F9F" custom-prefix="iconfont" />
				<input class="business_serach_input u-m-l-10" type="text" v-model="searchObj.name" placeholder="搜索"
					placeholder-style="color:#C5C5C5" @input="onSearch" />

			</view>
			<view class="reset" @click="onReset">
				重置
			</view>
		</view>
		<u-dropdown ref='dropRef' title-size='24' duration='0' menu-icon='arrow-down-fill' menu-icon-size='14'
			@beforeOpen="onBeforeOpen" active-color='#F4B840'>
			<u-dropdown-item title="地区"></u-dropdown-item>
			<u-dropdown-item title="行业"></u-dropdown-item>
			<u-dropdown-item v-model="searchObj.price" title="营业额" :options="moneyList" @change='onPriceChange'>
			</u-dropdown-item>
		</u-dropdown>

		<view class="business_docking_content u-m-t-30">
			<view class="business_docking_content_item" v-for="(item,index) in dataList" :key='index'
				@click="$to(`/package/businessDocking/resourceView/index?id=${item.pk_id}`)">
				<view class="b_docking_item_user">
					<view class="b_docking_item_user_left">
						<view class="b_docking_item_u_t">
							<view class="b_docking_item_u_name ">{{item.contacts}}</view>
							<view class="b_docking_item_u_call ">{{item.position}}</view>
						</view>
						<view class="b_docking_item_title u-line-2">{{item.industry}}</view>
						<view class="b_docking_item_company u-line-2">{{item.name}} </view>
					</view>

				</view>
				<view class="business_need">
					<view class="business_need_resources">Ta需要的资源</view>
					<view class="business_need_resources_content">{{item.need}}</view>
				</view>
				<view class="business_need">
					<view class="business_need_resources">Ta能提供的资源</view>
					<view class="business_need_resources_content">{{item.provide}}</view>
				</view>

			</view>
		</view>
		<view class="" style="height: 100rpx;"></view>
		<u-select v-model="area_show" :list="area_list" safe-area-inset-bottom value-name='code' label-name='name'
			mode='mutil-column-auto' @confirm='onSreaConfirm' />

		<industry ref='industryRef' @callBack='onIndustryCallback' />
		<sww-login></sww-login>

	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/pagingMixin.js';
	import Industry from './conponents/industry/index.vue'
	import {
		pageShare
	} from '@/mixins/pageShare';
	export default {
		mixins: [pageShare, pagingMixin],
		components: {
			Industry
		},

		data() {
			return {
				area_show: false,
				area_list: [],
				dropdownPrevent: false, //是否可打开下拉
				moneyList: [{
						label: '500万元以内',
						value: '500'
					},
					{
						label: '1000万元以内',
						value: '1000'

					},
					{
						label: '5000万元以内',
						value: '5000'

					},
					{
						label: '1亿元以内',
						value: '10000'

					},
					{
						label: '5亿元以内',
						value: '50000'

					},
					{
						label: '10亿元以内',
						value: '100000'

					},
				],
				searchObj: {
					type: '',
					area: '',
					price: '',
					name: ''
				}
			}
		},

		computed: {
			paramsObj() {
				let params = {
					type: this.searchObj.type || undefined,
					area: this.searchObj.area || undefined,
					price: this.searchObj.price || undefined,
					name: this.searchObj.name || undefined,
				}

				return params
			},
		},
		onLoad() {

			this.initPage()
			this.initData()

		},
		onReachBottom() {
			this._load_data();
		},
		methods: {

			initData() {
				this.$adminPost('AdminGetClassificationList', {
					type: 4
				}).then(res => {
					this.area_list = JSON.parse(res.data)
				})

			},
			onIndustryCallback(val) {
				
				this.searchObj.type = val
				this.initPage()
			},
			onReset() {
				this.searchObj = {
					type: '',
					area: '',
					price: '',
					name: ''
				}
				this.initPage()
			},
			initPage() {

				this._init_data('GetResourcesInfoList', this.paramsObj)
			},
			onSearch() {
				this.initPage()
			},
			onSreaConfirm(val) {
		
				let area = val.reduce((pre, el) => {
					pre.push(el.label)
					return pre
				}, []).join(',')
				this.searchObj.area = area
				this.initPage()
			},
			onPriceChange(val) {
			
				this.initPage()
			},
			onBeforeOpen(val) {
				if (val == 1 || val == 0) {
					this.$refs.dropRef.prevent = false
					if (val == 0) this.area_show = true
					if (val == 1) this.$refs.industryRef.onShowPopup()
				} else {
					this.$refs.dropRef.prevent = true
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.business_docking {
		padding: 10rpx 0 0;

		.business_docking_serach {
			display: flex;
			align-items: center;
			padding: 0 30rpx;

			.reset {
				width: 120rpx;
				text-align: center;
				color: #606266;
			}

			.business_serach_input {
				width: 100%;
			}

			.business_serach {
				display: flex;
				align-items: center;
				flex: 1;
				padding: 18rpx 28rpx;
				border-radius: 30rpx;
				background-color: #F7F7F7;
				height: 60rpx;
			}

			.serach_name {
				display: flex;
				align-items: center;
			}
		}

		.business_docking_content {
			padding: 0 30rpx;

			.business_docking_content_item {
				width: 690rpx;
				background: #FFFFFF;
				border-radius: 18rpx;
				margin: 0 auto 34rpx;
				overflow: hidden;
				box-shadow: 0 0 5rpx 8rpx rgba(0, 0, 0, .05);

				&:nth-last-of-type(1) {
					margin-bottom: 0;
				}

				.b_docking_item_user {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #000000;
					padding: 36rpx 24rpx 30rpx;
					background: linear-gradient(270deg, #EED890 0%, #F7F0AB 99%);
					margin-bottom: 36rpx;

					.b_docking_item_user_left {
						flex: 1;

						.b_docking_item_u_t {
							display: flex;
							align-items: center;

							.b_docking_item_u_name {
								font-size: 34rpx;
								font-weight: bold;
								margin-right: 34rpx;
							}

							.b_docking_item_u_call {
								font-size: 22rpx;
							}
						}




						.b_docking_item_title {
							font-size: 22rpx;
							margin-bottom: 11rpx;
							margin-top: 3rpx;
						}

						.b_docking_item_company {
							font-size: 18rpx;
						}
					}


					.b_docking_item_user_right {
						width: 180rpx;
						text-align: right;
					}

				}


			}
		}

		.business_need {
			padding: 0 20rpx 38rpx;
			border-bottom: 1rpx solid #E5E5E5;
			margin-bottom: 40rpx;

			&:nth-last-of-type(1) {
				border-bottom: 0;
				margin-bottom: 0;
			}

			.business_need_resources {
				font-size: 26rpx;
				font-weight: bold;
				color: #000000;
			}

			.business_need_resources_content {
				font-size: 24rpx;
				font-weight: 400;
				color: #686868;
				margin-top: 30rpx;
				position: relative;
				padding-left: 20rpx;

				&::after {
					content: '';
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 0;
					width: 4rpx;
					height: 4rpx;
					background-color: #000000;
					border-radius: 50%;
				}
			}
		}

	}
</style>
